<!--
 * @description 固定数量课程组件
 * @author 郭计腾
 * @date 2022/11/14
 -->
<template>
  <section
    class="course-list-fixed-comp"
    :style="{ 'margin-top': top,'padding-left': spacing, 'padding-right': spacing}"
  >

    <div class="list-content">
      <section class="c-index-page-title" :class="{bg:isBg}">
        <div class="page-title etc">
          {{ isShowModuleName ? moduleName : '' }}
        </div>
        <div v-if="showMore" class="paeg-more">
          <span>查看更多</span>
        </div>
      </section>
      <van-row>
        <van-col v-for="(item,index) in list" :key="index" span="12">
          <div class="item-full">
            <div class="list-item">
              <div class="item-img">
                <van-image :src="getMapping(item,'courseImgUrl')">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                  <template v-slot:error>
                    <img src="../../images/base/error-icon.png" alt>
                  </template>
                </van-image>
              </div>
              <div class="item-title">
                <span>{{getMapping(item,'courseName') }}</span>
              </div>
              <div class="item-desc">
                <span>{{getMapping(item,'courseIntroduce') }}</span>
              </div>
              <div class="item-number">
                <!-- <span>浏览人次：{{item.pageview || 0}}</span> -->
              </div>
            </div>
          </div>
        </van-col>
      </van-row>

    </div>

  </section>
</template>

<script>
import mixins from '@/components/CustomPage/apps/widget/mixins'

export default {
  name: 'CourseListFixedComp',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: () => ({})
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      courseClassify: '',
      courseLabel: '',
      courseBelong:'',
      pageSize: 4
    }
  },
  computed: {

    // 是否展示更多
    showMore() {
      return this.option.showMore
    },
    // 模块名称
    moduleName() {
      return this.option.moduleName
    },
    // 是否显示背景图
    isBg() {
      return this.option.isBg
    },
    isShowModuleName() {
      return this.option.isShowModuleName
    },
    spacing() {
      return this.px2rem(this.option.spacing || 0)
    },
    link() {
      return this.option.link
    },
    moreLink() {
      return this.option.moreLink
    },
    showNumber() {
      return this.option.showNumber
    },
    showSubtitle() {
      return this.option.showSubtitle
    }
  },
  watch: {
    showNumber(num) {
      this.pageSize = num
      if (!this.isInitData) {
        this.setList(num)
      }
    }
  },
  async created() {
    if (this.isInitData) {
      this.courseClassify = this.option.origin === 1 ? this.option.classify4company.split('/').reverse()[0] : this.option.classify4platform.split('/').reverse()[0]
      this.courseLabel = this.option.origin === 1 ? this.option.label4company : this.option.label4platform
      this.courseBelong = this.option.origin === 1 || this.option.origin === 2 ? 1 : 2
      this.pageSize = this.option.showNumber
      await this.initData()
    } else {
      this.setList(4)
    }
  },
  methods: {
    setData(result) {
      this.list = result?.dataList?.code === '200' ? result.dataList.data?.rows : []
    },
    setList(num) {
      this.list = []
      for (let i = 0; i < num; i++) {
        this.list.push({
          bid: '4146cde6-8f9b-4580-a154-f410e2c3fd2a',
          courseImg: '../../images/base/error-icon.png',
          courseImgUrl: '../../images/base/error-icon.png',
          courseIntroduce: '简介' + (i + 1),
          courseName: '名称' + (i + 1),
          id: 'Z1481437403990192130',
          learnNum: 90,
          pageview: 583
        })
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/utility/rem.scss';

.course-list-fixed-comp {
  margin: 0 auto;
  position: relative;
  width: rem(750);

  .list-content {

    background: #fff;
    border-radius: rem(16);
    .c-index-page-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: rem(88);

      &.bg {
        background: url("../../images/base/kcxxbj.png") no-repeat;
        background-size: 100% 100%;
        border-radius: rem(0);
      }

      .page-title {
        padding-left: rem(21);
        font-size: rem(32);
        font-family: PingFang SC Medium, PingFang SC Medium-Medium;
        font-weight: bold;
        color: #222222;
        flex: 1;
      }

      .paeg-more {
        flex: 0 0 auto;
        margin-left: rem(20);
        font-size: rem(26);
        font-family: PingFang SC Regular, PingFang SC Regular-Regular;
        font-weight: 400;
        padding-right: rem(19);
        color: #999999;
      }

    }

    .van-row {
      margin-top: rem(20);

      .van-col {
        .item-full {
          width: 100%;
          height: rem(300);
          display: flex;
          justify-content: center;

          .list-item {
            display: block;
            width: rem(321);
            padding-bottom: rem(10);

            .item-img {
              width: 100%;
              height: rem(180);
              margin: 0 auto;

              .van-image {
                height: 100%;
                width: 100%;

                img {
                  position: relative;
                  height: 100%;
                  width: 100%;
                  border-radius: rem(16) rem(16) 0 0;
                }
                .van-image__error {
                  border-radius: rem(16) rem(16) 0 0;
                  > img {
                    width: rem(100);
                    height: rem(100);
                  }

                }
              }
            }

            .item-title {
              font-size: rem(30);
              font-family: PingFang SC Medium, PingFang SC Medium-Medium;
              font-weight: bold;
              text-align: left;
              color: #333333;
              margin-top: rem(18);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .item-desc {
              font-size: rem(24);
              font-family: PingFang SC Regular, PingFang SC Regular-Regular;
              font-weight: 400;
              text-align: left;
              color: #999999;
              margin-top: rem(18);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .item-number {
              font-size: rem(24);
              font-family: PingFang SC Regular, PingFang SC Regular-Regular;
              font-weight: 400;
              text-align: left;
              color: #999999;
              margin-top: rem(18);
              padding-bottom: rem(23);
            }
          }
        }
      }
    }
  }

}
</style>
